<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>店铺</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>

    </style>
</head>

<body>
    <div class="app">
        <div class="order-list" v-if="listSellOrder&&listSellOrder.length>0">
            <div class="order-item" v-for="(item, index) in listSellOrder" :key="index" @click="goPage(item.id)">
                <div class="f1 flex-x-sb">
                    <div>{{item.shopName}}</div>
                    <div>{{item.statusText}}</div>
                </div>
                <div class="f2 flex-x-sb" v-for="(it,idx) in item.orderItems" :key="idx">
                    <div class="order-info flex-x-s">
                        <img :src="it.imageUrl ? it.imageUrl : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/loading3.png'" alt="">
                        <div class="order-info-txt">
                            <div class="title">{{it.name}}</div>
                            <div class="money"><span>¥</span>{{Number(it.price).toFixed(2)}}</div>
                        </div>
                    </div>
                    <div>x {{it.quantity}}</div>
                </div>
                <div class="f3">
                    <div v-show="item.returnLogisticsEnabled" @click.stop="changeLogistics(item.id, 1)">退货物流</div>
                    <div v-show="item.changeLogisticsEnabled" @click.stop="changeLogistics(item.id, 1)">换货物流</div>

                    <div v-show="item.cancelChangeEnabled" @click.stop="operateOrder('确认取消换货？', 'cancelChange', item.id, '取消成功')">取消换货</div>
                    <div v-show="item.cancelRefundEnabled" @click.stop="operateOrder('确认取消退款？', 'cancelRefund', item.id, '取消成功')">取消退款</div>
                    <div v-show="item.cancelReturnEnabled" @click.stop="operateOrder('确认取消退货？', 'cancelReturn', item.id, '取消成功')">取消退货</div>

                    <div v-show="item.changeEnabled" @click.stop="operateOrder('确认申请换货？', 'applyChange', item.id, '提交成功')">换货</div>
                    <div v-show="item.returnEnabled" @click.stop="operateOrder('确认申请退货？', 'applyReturn', item.id, '提交成功')">退货</div>
                    <div v-show="item.refundEnabled" @click.stop="operateOrder('确认申请退款？', 'applyRefund', item.id, '提交成功')">退款</div>

                    <div v-show="item.logisticsEnabled" @click.stop="viewLogistics(item.id, 0)">查看物流</div>

                    <div v-show="item.payEnabled" @click.stop="doOrder('付款',item.id,item.orderAmount)">付款</div>

                    <div v-show="item.receiptEnabled" @click.stop="operateOrder('确认收货？', 'receiptOrder', item.id, '收货成功')">确认收货</div>
                    <div v-show="item.removeEnabled" @click.stop="operateOrder('确认删除订单？', 'deleteUserOrder', item.id, '删除成功')">删除订单</div>
                    <div v-show="item.cancelEnabled" @click.stop="operateOrder('确认取消订单？', 'cancelOrder', item.id, '取消成功')">取消订单</div>
                </div>
            </div>
        </div>
        <div v-else class="collect-empty">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
            <div>暂无内容～</div>
        </div>
        <van-popup v-model="showPay" closeable round position="bottom" :style="{ height: '40%' }">
            <div class="pay-method">
                <div class="money"><span>¥</span>{{Number(payTotal).toFixed(2)}}</div>
                <div>付款方式</div>
                <div class="wx-pay flex-x-sb" @click="selectPayMethod(0)">
                    <div class="flex-x-s">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/wxpay.png" alt="">
                        <span>微信支付</span>
                    </div>
                    <img class="selectImg" :src="payMethod===0?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/no-select.png'" alt="">
                </div>
                <div class="wx-pay flex-x-sb" @click="selectPayMethod(3)">
                    <div class="flex-x-s">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/zfbpay.png" alt="">
                        <span>支付宝</span>
                    </div>
                    <img class="selectImg" :src="payMethod===3?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/no-select.png'" alt="">
                </div>
                <div class="pay" @click="payOrders">立即支付</div>
            </div>
        </van-popup>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>

    <script>
        apiready = function() {
            var vm = new Vue({
                el: '.app',
                data: {
                    oddNum: '',
                    active: 0,
                    showPay:false,
                    showReturn: false,
                    showToast: false,
                    toastText: '',

                    listSellOrder: [],
                    queryParam: {
                        pageNum: 1,
                        pageSize: 10,
                        orderStatus:null
                    },
                    hasNext: false,
                    orderId:null,
                    payMethod:0,
                    checkStatus:false,
                    payTotal:0
                },
                filters: {
                    saleStatus(status) {
                        switch (Number(status)) {
                            case 0:
                                status = "订单进行中"
                                break;
                            case 1:
                                status = "订单完结"
                                break;
                            case 2:
                                status = "订单关闭"
                                break;
                        }
                        return status;
                    }
                },
                mounted() {
                    this.getListUserOrders();
                },
                methods: {
                    operateOrder(title, operation, id, msg) {
                        api.confirm({
                            title: title,
                            buttons: ['确定', '取消']
                        }, function(ret, err) {
                            if (ret.buttonIndex == 1) {
                                order(operation)(id, function(ret){
                                    toastBottom(msg);
                                    vm.getListUserOrders();
                                })
                            }
                        });
                    },
                    viewLogistics(id, type) {
                        api.openWin({
                            name: 'my_logistics_win',
                            url: 'my_logistics_win.html',
                            bounces: false,
                            pageParam: {orderId : id, type: type}
                        });
                    },
                    changeLogistics(id, type) {
                        order('seeLogistics')({id: id, type: type},function(ret){
                            if (ret.data.length === 0) {
                                api.openFrame({
                                    name: 'return_logistics',
                                    url: 'widget://html/common/return_logistics_frm.html',
                                    rect: {
                                        marginTop: 0,
                                        marginBottom: 0,
                                        w: 'auto',
                                    },
                                    pageParam: {
                                        id: id
                                    },
                                    softInputMode: 'pan'
                                })
                            } else {
                                vm.viewLogistics(id, type)
                            }
                        })
                    },
                    //付款成功后的状态
                    paySuccess:function(){
                        toastMiddle('支付成功')
                        setTimeout(function () {
                            vm.getListUserOrders()
                        }, 500)
                    },
                    payFail() {
                        toastMiddle('支付失败')
                    },
                    //微信支付
                    wxPay:function(data){
                        var vm = this;
                        var wxPayPlus = api.require('wxPayPlus');
                        wxPayPlus.payOrder({
                            apiKey: data.appId,
                            orderId: data.prepayId,
                            mchId: data.partnerId,
                            nonceStr: data.nonceStr,
                            timeStamp: data.timeStamp,
                            package: data.packageValue,
                            sign: data.sign
                        }, function(ret, err) {
                            if (ret.status) {
                                vm.paySuccess()
                            } else {
                                vm.payFail();
                            }
                        });
                    },
                    //支付宝支付
                    aliPay:function(data){
                        var vm = this
                        var aliPayPlus = api.require('aliPayPlus');
                        aliPayPlus.payOrder({
                            orderInfo: data
                        }, function(ret, err) {
                            if(ret.code==9000){
                                vm.paySuccess()
                            }else {
                                vm.payFail()
                            }
                        });
                    },
                    // 选择支付方式
                    selectPayMethod(type){
                        this.payMethod = type
                    },
                    // 订单支付
                    payOrders(id){
                        var param = {
                            id:this.orderId,
                            payMethod:this.payMethod,
                        }
                        vm.checkStatus = false
                        order('payOrders')(param,function(ret){
                            console.log("订单支付："+JSON.stringify(ret))
                            vm.checkStatus = false
                            vm.checkOrderStatusTimer = setInterval(()=>{
                                vm.checkOrderStatus(ret.data.paymentSn)
                            },30)
                        })
                    },
                    // 检查支付状态
                    checkOrderStatus(sn){
                        var vm = this;
                        order('checkOrderStatus')(sn,function(ret){
                            if(ret.data.status === 'WAIT_PAY'){
                                // 成功
                                clearInterval(vm.checkOrderStatusTimer)
                                api.hideProgress();
                                vm.showPay = false;
                                // 订单成功 调微信和支付宝
                                if(!vm.checkStatus){
                                    vm.checkStatus = true
                                    if(vm.payMethod == 0){
                                        // 微信
                                        vm.wxPay(ret.data.wxPayAppOrderResult)
                                    }else if (vm.payMethod == 3){
                                        // 支付宝
                                        vm.aliPay(ret.data.aliPayBody)
                                    }
                                }
                            }else if (ret.data.status === 'PRE_PAY_FAIL'){
                                // 失败
                                clearInterval(vm.checkOrderStatusTimer)
                                api.hideProgress();
                                vm.showPay = false;
                                toastBottom('创建订单失败')
                            }
                        })
                    },
                    // 获取订单列表
                    getListUserOrders() {
                        var vm = this;
                        order('getListUserOrders')(vm.queryParam,function(ret){
                            vm.hasNext = ret.data.hasNext
                            if(vm.queryParam.pageNum == 1){
                                vm.listSellOrder = ret.data.list
                            }else{
                                vm.listSellOrder = vm.listSellOrder.concat(ret.data.list)
                            }
                        })
                    },
                    doOrder(toastText, orderId , total) {
                        this.orderId = orderId
                        this.showPay = true
                        this.payTotal = total
                    },
                    goPage(id) {
                        api.openWin({
                            name: 'my_order_detail_win',
                            url: 'my_order_detail_win.html',
                            bounces: false,
                            pageParam: {
                                orderId: id
                            }
                        });
                    }
                },
            })
            api.addEventListener({
                name: 'orderType'
            }, function(ret, err) {
                var active = ret.value.active
                vm.queryParam.pageNum = 1
                if(active == 0){
                    vm.queryParam.orderStatus = null
                }else if (active == 1){
                    vm.queryParam.orderStatus = 'WAIT_PAY'
                }else if (active == 2){
                    vm.queryParam.orderStatus = 'WAIT_SHIP'
                }else if (active == 3){
                    vm.queryParam.orderStatus = 'WAIT_RECEIPT'
                }else if (active == 4){
                    vm.queryParam.orderStatus = 'AFTER_SALES'
                }
                vm.getListUserOrders()
            });
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.queryParam.pageNum = 1
                vm.getListUserOrders()
                api.refreshHeaderLoadDone()
            });
            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function (ret, err) {
                console.log("上拉加载");
                if (vm.hasNext) {
                    vm.queryParam.pageNum++
                    vm.getListUserOrders()
                }
            });

            api.addEventListener({
                name: 'refreshOrderList',
            }, function (ret, err) {
                vm.queryParam.pageNum = 1
                vm.getListUserOrders();
            });


        }
    </script>
</body>

</html>
